<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <input type="checkbox" id="all">我全都要<br>
    <input type="checkbox" class="girl">m1<br>
    <input type="checkbox" class="girl">m2<br>
    <input type="checkbox" class="girl">m3<br> 
    <script>
        let all=document.querySelector('#all')
        let girls=document.querySelectorAll('.girl')
        all.onclick=function()
        {
            // alert("hh");
            for (let i = 0; i < girls.length; i++) {
                girls[i].checked=all.checked;
            }
        }

        //给其它元素进行绑定事件
        for(let i=0;i<girls.length;i++)
        {
            girls[i].onclick=function(){
                all.checked=reserve(girls)
            }
        }
        function reserve(girls){
            for (let i = 0; i < girls.length; i++) {
                if(girls[i].checked)
                    return false;
            }
            return true;
        }
    </script> 
</body>
</html>